<template>
  <div class="play-page-footer" v-if="currentSong">
    <!-- 歌曲信息 -->
    <div class="message">
      <div class="container">
        <div class="top e_1">{{ currentSong.name }}</div>
        <div class="middle">
          <span
            v-for="(ar, index) in currentSong.song
              ? currentSong.song.artists
              : currentSong.ar"
            :key="index"
          >
            {{ ar.name }}
          </span>

          <div class="item">关注</div>
          <div class="item">高品</div>
          <div class="item">音效</div>
          <div class="item">伴唱</div>
          <div class="item">视频</div>
        </div>

        <!-- TODO：喜欢程度：喜欢，比较喜欢，非常喜欢 -->
        <div class="bottom">
          <div class="icon">
            <img
              src="../../../assets/kugou/爱心.png"
              @click="showLike = true"
            />
          </div>

          <transition
            name="custom-classes-transition"
            enter-active-class="animated fadeInUp"
            leave-active-class="animated fadeOutDown"
          >
            <div class="popover" v-if="showLike">
              <header>
                <div class="text">设置喜欢程度</div>

                <div class="button" @click="showLike = false">✖</div>
              </header>

              <div class="container">
                <div class="left">
                  <div class="item">取消喜欢</div>
                </div>

                <div class="right">
                  <div class="item">喜欢</div>
                  <div class="item">比较喜欢</div>
                  <div class="item">非常喜欢</div>
                </div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>

    <!-- 进度条 -->
    <div class="progress">
      <!-- 当前播放时间 -->
      <div class="current time_base">
        {{ currentTime | parseTime }}
      </div>

      <input
        type="range"
        v-model="value"
        :min="0"
        :max="duration"
        @input="inputBox"
        @change="updateBox"
      />

      <div class="bg">
        <div class="bar" :style="{ width: `${percent_width}%` }"></div>
      </div>

      <!-- 总时间 -->
      <div class="total time_base">
        {{ duration | parseTime }}
      </div>
    </div>

    <!-- 工具条 -->
    <div class="tool">
      <!-- 选中的播放模式 -->
      <div class="left">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="top"
        >
          <!-- 一开始说是顺序 -->
          <template #reference>播放模式</template>
        </van-popover>
      </div>

      <!-- 上一曲 -->
      <div class="item icon_base" @click="prevSong"></div>

      <div class="item">
        <!-- 暂停 -->
        <img
          v-if="playing"
          @click="updatePlayingState({ bool: false })"
          src="../../../assets/暂停_白色.png"
          alt=""
        />
        <!-- 播放 -->
        <img
          v-else
          @click="updatePlayingState({ bool: true })"
          src="../../../assets/播放_白色.png"
          alt=""
        />
      </div>

      <!-- 下一曲 -->
      <div class="item icon_base" @click="nextSong()"></div>

      <!-- 播放列表 -->
      <div
        class="item icon_base"
        @click="$parent.$parent.showMyPlayList = true"
      ></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "PlayPageFooter",
  components: {},
  data() {
    return {
      value: this.currentTime, // 当前时间
      inputing: false, // 是否正在拖动

      fav: JSON.parse(window.localStorage.getItem("fav")) || [],

      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "顺序播放" },
        { text: "单曲循环" },
        { text: "随机播放" },
        { text: "列表循环" },
      ],

      showLike: false,
    };
  },
  watch: {
    // 监听当前播放进度
    currentTime(n) {
      if (!this.inputing) {
        this.value = n;
      }
    },

    // 持久化
    fav(n) {
      window.localStorage.setItem("fav", JSON.stringify(n));
    },
  },
  computed: {
    // 宽度百分比
    percent_width() {
      return (this.value / this.duration) * 100;
    },

    // 是否收藏
    isFav() {
      return this.fav.includes(this.currentSong.id);
    },

    ...mapState([
      "currentTime",
      "duration",
      "playing",
      "currentSong",
      "followSingers",
    ]),

    // 是否已经关注歌手
    isFollow() {
      return this.followSingers.includes(this.currentSong.song.artists[0].id);
    },
  },
  methods: {
    // 松开拖动进度条时触发
    updateBox() {
      this.inputing = false;
      this.$emit("update:currentTime", this.value);
    },

    // 正在拖动进度条时触发
    inputBox() {
      this.inputing = true;
    },

    // 添加收藏
    add() {
      this.fav.push(this.currentSong.id);

      const timer = setTimeout(() => {
        clearTimeout(timer);
        this.$toast({
          type: "success",
          message: "添加收藏成功",
        });
      }, 500);
    },

    // 移除收藏
    remove() {
      const index = this.fav.indexOf(this.currentSong.id);
      this.fav.splice(index, 1);

      const timer = setTimeout(() => {
        clearTimeout(timer);

        this.$toast({
          type: "success",
          message: "移除收藏成功",
        });
      }, 500);
    },

    ...mapMutations([
      "updatePlayingState",
      "prevSong",
      "nextSong",
      "addFollowSinger",
      "removeFollowSinger",
    ]),

    // 播放模式
    onSelect(action, index) {
      this.$store.commit("changePlayMode", { mode: index });

      this.$toast({
        message: action,
        position: "top",
      });
    },
  },

  // 防止NAN
  created() {
    this.value = this.currentTime;
  },
};
</script>

<style lang="less" scoped>
.play-page-footer {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;

  .message {
    width: 100%;
    margin-bottom: 10px;

    & > .container {
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;

      .top {
        width: fit-content;
        font-size: 24px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 10px;
      }

      .middle {
        font-size: 13px;
        color: #fff;
        display: flex;

        .item {
          width: 50px;
          height: 20px;
          background-color: #d4d0d8;
          border-radius: 5px;
          font-weight: bold;
          text-align: center;
          line-height: 20px;
          margin: 0 5px;
          color: black;
        }
      }

      .bottom {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .icon {
          width: 50px;
          height: 100%;
        }

        .popover {
          color: #fff;
          background-color: #000;
          border-radius: 5px;
          position: absolute;
          top: -110px;
          width: 300px;
          height: 115px;

          header {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .text {
              flex: 1;
              text-align: center;
            }
          }

          & > .container {
            width: 100%;
            height: 60%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            line-height: 69px;

            .left {
              width: 100px;
              height: 100%;
              text-align: center;
            }

            .right {
              width: 200px;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
    }
  }

  .progress {
    position: relative;
    width: 80%;
    height: 30px;
    margin: 0 auto;

    input {
      width: 100%;
      height: 20px;
      opacity: 0;
    }

    .bg {
      width: 100%;
      height: 5px;
      background-color: rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 15px;
      left: 0;
      z-index: -1;

      .bar {
        width: 10%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.3);
        position: relative;

        &::before {
          content: "";
          position: absolute;
          right: 5px;
          top: 0;
          width: 5px;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.4);
          margin-right: -10px;
          border-radius: 50%;
        }
      }
    }
  }

  .current {
    position: absolute;
    top: 5px;
    left: -43px;
  }

  .total {
    position: absolute;
    top: 5px;
    right: -40px;
  }

  .time_base {
    width: 50px;
    height: 30px;
    color: #fff;
    z-index: 7;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    font-weight: bolder;
  }

  .tool {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .left {
      color: #fff;
    }

    .item {
      width: 60px;
      height: 100%;
      text-align: center;
      line-height: 50px;

      &:nth-of-type(2) {
        background-image: url("../../../assets/上一曲.png");
      }

      &:nth-of-type(3) {
        img {
          width: 60px;
        }
      }

      &:nth-of-type(4) {
        background-image: url("../../../assets/下一曲.png");
      }

      &:nth-of-type(5) {
        background-image: url("../../../assets/播放列表_白色.png");
      }
      img {
        width: 30px;
        vertical-align: middle;
      }
    }
  }
}
</style>
